<template>
  <div class="roleManAdd">
    <div class="roleManAdd-tittle">
      <div class="crumbs">
        <p>
          <span>设置 /</span><span> 角色管理 /</span> 新建角色信息<span></span>
        </p>
        <h3>新建角色信息</h3>
      </div>
    </div>
    <div class="baseMsg">
      <div class="base-title">基础信息</div>
      <div class="base-content">
        <div class="content-one">
          <span>角色名称</span
          ><el-input
            v-model="input"
            placeholder="请输入"
            style="width: 400px"
          />
        </div>
        <div class="content-two">
          <span>角色描述</span>
          <el-input
            v-model="textarea"
            :rows="10"
            style="width: 400px"
            type="textarea"
            placeholder="请输入"
          />
        </div>
      </div>
    </div>
    <div class="powerMsg">
      <div class="powerMsg-title">权限信息</div>
      <div class="powerMsg-content">
        <el-checkbox
          v-model="checkAll"
          :indeterminate="isIndeterminate"
          @change="handleCheckAllChange"
          >业主管理</el-checkbox
        >
        <el-checkbox-group
          v-model="checkedCities"
          @change="handleCheckedCitiesChange"
        >
          <el-checkbox v-for="city in cities" :key="city" :label="city">{{
            city.text
          }}</el-checkbox>
        </el-checkbox-group>
        <el-checkbox
          class="powerCheck"
          v-model="powerAll"
          :indeterminate="isPower"
          @change="powerChange"
          >业务管理</el-checkbox
        >
        <el-checkbox-group v-model="powerItems" @change="powerItemsChange">
          <el-checkbox v-for="v in item" :key="v" :label="v">{{
            v.text
          }}</el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="dispose">
        <el-button type="primary" @click="addRole">提交</el-button>
        <el-button type="primary" plain @click="goBacak">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import axios from "../../utils/http";
import timeTrans from "../../utils/time";
import { ElMessage } from "element-plus";

const router = useRouter();
const route = useRoute();
const input = ref("");
const textarea = ref("");
// 权限信息
const checkAll = ref(false);
const isIndeterminate = ref(false);
const checkedCities = ref([]);
const cities = [
  { id: 1, text: "查看" },
  { id: 2, text: "新增" },
  { id: 3, text: "编辑" },
  { id: 4, text: "删除" },
];

const handleCheckAllChange = (val) => {
  console.log(val, "444444444");
  checkedCities.value = val ? cities : [];
  isIndeterminate.value = false;
  console.log(checkedCities.value, "666666666");
};
const handleCheckedCitiesChange = (value) => {
  console.log(value, "45555555");
  const checkedCount = value.length;
  checkAll.value = checkedCount === cities.length;
  isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length;
};

// 新加的路由
const powerAll = ref(false);
const isPower = ref(false);
const powerItems = ref([]);
const item = [
  { id: 1, text: "工作台" },
  { id: 2, text: "资料管理" },
  { id: 3, text: "车行管理" },
  { id: 4, text: "物业管理" },
  { id: 5, text: "缴费管理" },
  { id: 6, text: "设备管理" },
  { id: 7, text: "设置" },
];

const powerChange = (val) => {
  console.log(val, "444444444");
  powerItems.value = val ? item : [];
  isPower.value = false;
};
const powerItemsChange = (value) => {
  console.log(value, "45555555");
  const checkedCount = value.length;
  powerAll.value = checkedCount === item.length;
  isPower.value = checkedCount > 0 && checkedCount < item.length;
};

// 返回
const goBacak = () => {
  router.go(-1);
};

// 提交
const addRole = () => {
  let nowDate = Date.now();
  let getTime = timeTrans(nowDate);
  let addPerson = sessionStorage.getItem("user");
  let menuIds = ref([]);
  checkedCities.value.forEach((v) => {
    menuIds.value.push(v.id);
  });
  let rountingIds = ref([]);
  powerItems.value.forEach((v) => {
    rountingIds.value.push(v.id);
  });

  
  axios({
    url: "/roleManagement/add",
    method: "post",
    data: {
      addPerson: addPerson,
      addTime: getTime,
      personnelNumber: 0,
      roleDesc: textarea.value,
      roleMenu: {
        menuIds: menuIds.value,
        rountingIds: rountingIds.value,
      },
      roleName: input.value,
      state: "",
    },
  }).then(({ data }) => {
    
    if (data.code == 0) {
      router.go(-1);
      ElMessage({
        message: "添加成功",
        type: "success",
      });
    } else {
      console.log(data);
    }
  });
};
</script>

<style lang="less" scoped>
.roleManAdd {
  width: 90%;
  margin: auto;
  // border: 1px solid red;
  .roleManAdd-tittle {
    // border: 1px solid red;
    background-color: white;
    margin-top: 20px;
    margin-bottom: 20px;
    .crumbs {
      padding: 20px 20px;
      font-size: 16px;
      border-bottom: 1px solid #ccc;
      p {
        margin-bottom: 10px;
        span:nth-child(1),
        span:nth-child(2) {
          color: #8d8d8d;
        }
        span:last-child {
          color: #000;
        }
      }
    }
  }
  .baseMsg {
    background-color: white;
    // margin-top: 20px;
    margin-bottom: 20px;
    padding: 20px 20px;
    .base-title {
      margin-bottom: 10px;
    }
    .base-content {
      .content-one,
      .content-two {
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        span {
          margin-right: 15px;
        }
      }
      .content-two {
        align-items: flex-start;
      }
    }
  }

  .powerMsg {
    background-color: white;
    // margin-top: 20px;
    margin-bottom: 20px;
    padding: 20px;
    .powerMsg-title {
      margin-bottom: 20px;
    }
    .powerMsg-content {
      .powerCheck {
        margin-top: 20px;
      }
    }
    .dispose {
      padding: 20px 30px;
      margin-top: 20px;
    }
  }
}
</style>
